<div class="main-line"></div>
<div *ngFor="let device of devicesValue(); index as i" class="device-line" [style.left]="getDeviceLinePosition(i) + 'px'"></div>
<div class="connection-line" [style.left]="getDeviceConnectionLeftPosition(devicesValue().length) + 'px'" [style.width]="getDeviceConnectionWidth(devicesValue().length) + 'px'"></div>
<div class="container">
  <div class="main-device" *ngIf="server && server.property">
    <span class="device-header" style="padding-top: 10px;">{{ server.name }}</span>
    <span class="device-pro">{{ server.property.address }}</span>
    <mat-icon (click)="onEditDevice(server)" class="device-icon device-edit">edit</mat-icon>
  </div>
  <div *ngFor="let device of devicesValue(); index as i" class="node-device" [style.color]="(device.enabled) ? '#FFFFFF' : '#C5C5C5'" [style.left]="getDevicePosition(i) + 'px'">
    <span class="device-header">{{ device.name }}</span>
    <span class="device-pro" *ngIf="device.property">{{ device.property.address }}</span>
    <span class="device-pro" style="padding-bottom: 10px;">{{ getDevicePropertyToShow(device) }}</span>
    <!-- <div *ngIf="isDevicePropertyToShow(device)" style="padding-bottom: 10px;">
      <span class="device-pro-line" *ngIf="device.property.port">Port: {{ device.property.port }}</span>
      <span class="device-pro-line" *ngIf="device.property.rack || device.property.rack === 0"> / Rack: {{device.property.rack}}</span>
      <span class="device-pro-line" *ngIf="device.property.slot || device.property.slot === 0"> / Slot: {{device.property.slot}}</span>
    </div> -->
    <div class="device-status" *ngIf="device.enabled" [style.background-color]="getDeviceStatusColor(device)"></div>
    <mat-icon (click)="onListDevice(device)" class="device-icon device-list">list_alt</mat-icon>
    <mat-icon (click)="onEditDevice(device)" class="device-icon device-edit">edit</mat-icon>
    <mat-icon (click)="onRemoveDevice(device)" class="device-icon device-delete">clear</mat-icon>
  </div>
</div>

<button mat-fab color="primary" (click)="addDevice()" style="position: absolute; right: 20px; bottom: 30px; z-index: 9999;">
  <mat-icon class="">add</mat-icon>
</button>